<template>
	<view class="test_form">
		<!-- <div class="tit">{{tit}}</div> -->
		
		<div v-if="start">
			<div class="card">
				<div class="base">
					<div class="lab">您的性别</div>
					<div class="val_box">
						<uv-radio-group v-model="gender" >
							<uv-radio :customStyle="{marginLeft: '30px'}" v-for="(item, index) in genderOptions"
								:key="index" :label="item.label" :name="item.value"></uv-radio>
						</uv-radio-group>
					</div>
			
				</div>
			</div>
			<div class="card">
				<div class="base">
					<div class="lab">您的年龄</div>
					<picker :range="ageArr" :value="ageIndex" @change="bindPickerChange">
						<div class="val_box">
							<text class="age">{{ageArr[ageIndex]}}</text>
							<uv-icon size="18" color='#BBBBBB' name="arrow-down"></uv-icon>
						</div>
					</picker>
			
				</div>
			</div>
			<div class="submit" @click='start=false' >开始自测</div>
		</div>
		
		
		<div v-if="!start" class="question">
			<div class="item" v-for="(item,index) in list" :key='index'>
				<div v-if='index==lv1Index'>
					<div class="type_tit">
					<div class="tag">{{numComp(item)}}/{{item.item.length}}</div>
					{{item.typeName}}</div>
					
					
					<div v-for="(item2,index2) in item.item" :key='index2'>
						<div  class="card" v-if='lv2Index==index2'>
							<div class="ques_box">
								<div class="ques" >
									{{item2.name}}</div>
								<image class="ques_pic" mode='aspectFill' v-if="item2.image"  :src="baseURL+item2.image"></image>
							</div>				
							<Mradio  v-model="item2.valuer" :arr='item2.item' @check='()=>checkMradio(index,index2)'></Mradio>
						</div>
						
						
					</div>
				</div>
				
			</div>
		</div>
	
		<div class="submit" v-if='btnShow || showBtn' @click='submit'>提交</div>
	</view>
</template>

<script>
	import { getQuestInfo} from '@/network/api.js'
	import { baseURL } from '@/network/config.js'
	import Mradio from './mradio.vue'
	export default {
		components:{Mradio},
		data() {
			return {
				id:'',
				tit:'',
				gender: 1,
				genderOptions: [{
					label: "先生",
					value: 1
				}, {
					label: "女士",
					value: 2
				}],
				ageIndex: 17,
				ageArr: Array.from({
					length: 150
				}, (v, k) => k+1),
				baseURL,
				// -------------
				list:[],
				lv1Index:0,
				lv2Index:0,
				// -------------
				showBtn:false,
				start:true,
				type:0, // 题目类型   0 无维度
			}
		},
		onShow(){
			// #ifdef H5
			document.title = ' '
			// #endif
		},
		onLoad(options){
			console.log('id:',options.id)
			
			this.getDetail(options.id)
			this.tit = options.tit
			this.id = options.id
			uni.setNavigationBarTitle({	title: options.tit});
			// #ifdef H5
			document.title = ' '
			// #endif
		},
		computed:{
			btnShow(){
				// let flag = false
				// this.list.forEach((data,index)=>{
				// 	data.item.forEach((item2,index2)=>{
				// 		if(!item2.valuer){
				// 			flag = true
				// 		}
				//     })
				// })
				// return !flag
				if(this.lv1Index == this.list.length-1 && this.lv2Index == this.list[this.list.length-1].item.length-1){
					this.showBtn = true
					return true
				}
			}
		},
		methods: {
			bindPickerChange(e) {
				this.ageIndex = e.detail.value
			},
			navTo(path){uni.navigateTo({url: path});},
			async getDetail(id){
				const {data} = await getQuestInfo({id})
				console.log('data:',data)
				this.list = data.result
				this.type = data.typeInfo

			},
			submit(){
				let flag = false
				this.list.forEach((data,index)=>{
					data.item.forEach((item2,index2)=>{
						if(!item2.valuer){
							flag = true
						}
						let itemAllScore = Math.max(...item2.item.map(i=>i.score))
						// console.log('单项总分：',itemAllScore)
						item2.itemAllScore = itemAllScore
						let count = item2.item.find(i=>i.content == item2.valuer)
						if(count){
							item2.num = count.score
							if(count.score == itemAllScore){
								item2.ok = true
							}
						}
						
					})
				})
				if(flag){
					uni.showToast({title: '请做完题',duration: 2000,icon:'none'});
					return
				}
				
				this.list.forEach(data=>{
					data.okList = data.item.reduce((total,i)=>{return total+(i.ok?1:0) },0)
					data.total = data.item.reduce((total,i)=>{return total+i.num },0)
					data.itemAllScore = data.item.reduce((total,i)=>{return total+i.itemAllScore },0)
				})
				console.log('this.list:',this.list)
				uni.navigateTo({
				  url: `/pages/test_result/test_result?id=${this.id}&type=${this.type}`,
				  success: (res)=> {
				    // 通过eventChannel向被打开页面传送数据
				    res.eventChannel.emit('acceptDataFromOpenerPage', { list: this.list})
				  }
				})
			},
		
			numComp(item){
				console.log('00000:',item.item)
				if(item.item.every(i=>i.valuer)){
					console.log('////:',item.item.filter(i=>i.valuer).length)
					return item.item.filter(i=>i.valuer).length	
				}else{
					console.log('////2:',item.item.filter(i=>i.valuer).length+1)
					return item.item.filter(i=>i.valuer).length+1
				}
			},
			checkMradio(index,index2){
				console.log('index/index2:',index,index2)
				setTimeout(()=>{
					if(this.showBtn){
						return
					}
					this.lv2Index = index2+1
					if(this.lv2Index == this.list[this.lv1Index].item.length){
						this.lv2Index = 0
						this.lv1Index = index+1
					}
				},100)
			
				
			}
		}
	}
</script>
<style>
	page {
		background-color: #B5E4FF;
	}
</style>
<style scoped lang="less">
	.submit{
		height: 90rpx;
		background: #4E6FD9;
		border-radius: 45rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 25rpx;
	}
	.question{
		.item{
			.type_tit{
				text-align: left;
				font-size: 36rpx;
				font-weight: bold;
				color: #363636;
				margin-bottom: 22rpx;
				margin-top: 46rpx;
				display: flex;
				align-items: center;
				.tag{
					height: 42rpx;
					background: #4E6FD9;
					border-radius: 10rpx;
					color:#fff;
					padding: 5rpx 10rpx;
					margin-right: 12rpx;
					font-weight: normal;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
			}
			.ques_box{
				margin-bottom: 49rpx;
				.ques{
					font-size: 36rpx;
					font-weight: bold;
					color: #363636;	
					display: flex;
					align-items: center;
					border-top:1px solid #D4E7F2;
					border-bottom:1px solid #D4E7F2;
					padding: 30rpx 0;
					.tag{
						width: 42rpx;
						height: 42rpx;
						background: #4E6FD9;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-right: 10rpx;
						flex-shrink: 0;
					}
				}
				.ques_pic{
					width: 300rpx;
					height: 300rpx;
					margin-top: 30rpx;
					background-color: #f2f2f2;
				}
			}
			.card{
				padding-bottom: 0;
				background-color: #ECF8FF;
			}
		}
		.three_wrap{
			display: flex;
			flex-wrap: wrap;
		}
		
	}
	.test_form {
		padding: 25rpx;

		.tit {
			color: #363636;
			text-align: center;
			margin-bottom: 35rpx;		
			font-size: 42rpx;
			font-weight: bold;
		}

		.card {
			padding: 38rpx 40rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		}

		.base {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lab {
				font-size: 32rpx;
				font-weight: bold;
				color: #363636;
			}

			.val_box {
				display: flex;
				align-items: center;

				.age {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					margin-right: 21rpx;
				}
			}
			.val_box{
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>